<template>
  <div class="departments-container">
    <div class="app-container">
      <!-- 带box-shadow阴影的div -->
      <el-card v-loading="loading" class="tree-card">
        <!-- 用了一个行列布局 -->
        <tree-tool
          :item="company"
          @add="showAddDialog"
        />
        <!-- 组织架构tree组件 -->
        <el-tree
          :data="treeData"
          :props="{ label: 'name' }"
        >
          <!-- 通过作用域插槽获取每行部门的对象，让组件的结构支持自定义 -->
          <!-- 插槽：
            作用：解决组件内标签不确定的问题
            分类：1.匿名插槽：组件内只有一处标签不确定
                  操作：先在组件内标签不确定的位置上用slot占位，把组件写成双标签，在双标签之间填入需要分发的标签结构
                  2.具名插槽：组件内有两处及以上的标签不确定
                  操作：先在组件内标签不确定的位置上用slot占位，把组件写成双标签，在<template>双标签填入需要分发的标签结构
                  3.作用域插槽：不仅可以分发标签，还可以用到组件内部的数据
             -->
          <template #default="{ data }">
            <!-- 使用组件，传递自定义属性(父传子) -->
            <tree-tool
              :item="data"
              @delete="handleDelete"
              @add="showAddDialog"
              @edit="showEditDialog"
            />
          </template>
        </el-tree>
      </el-card>
      <!-- 添加部门组件使用add-dept组件 -->
      <!-- .sync修饰符是个语法糖，其原理是:is-show="isShow" @update:is-show="把组件传递来的新值赋值给isShow" -->
      <add-dept
        :is-show.sync="isShow1"
        :dept-list="deptList"
        :item="deptObj"
        @add-dept-success="getDeptList"
      />
      <!-- 编辑部门组件 -->
      <edit-dept
        :is-show.sync="isShow2"
        :dept-list="deptList"
        :item="deptObj"
        @edit-dept-success="getDeptList"
      />
    </div>
  </div>
</template>

<script>
import { getDeptListAPI, delDeptAPI } from '@/api/departments'
import { listToTree } from '@/utils/shift'
import TreeTool from './components/tree.vue'
import AddDept from './components/add-dept.vue'
import EditDept from './components/edit-dept.vue'

export default {
  components: {
    TreeTool,
    AddDept,
    EditDept
  },
  data() {
    return {
      // 部门列表
      deptList: [],
      // 部门树形数据
      treeData: [],
      // 公司信息
      company: {
        name: '',
        manager: '',
        id: ''
      },
      // 控制 add-dept
      isShow1: false,
      // 控制 edit-dept
      isShow2: false,
      // 记录当前部门的操作对象
      deptObj: {},
      // 控制盒子的加载提示
      loading: false
    }
  },
  created() {
    this.getDeptList()
  },
  methods: {
    // 获取部门列表
    async getDeptList() {
      // 请求前显示 loading 状态
      this.loading = true
      // 调接口发请求
      const resp = await getDeptListAPI()
      const { data } = resp
      this.company.name = data.companyName
      this.company.manager = data.companyManage
      this.company.id = data.companyId
      // 这里不能直接赋值，需要将数据转为树形数据再赋值
      // 调用listToTree方法，把部门列表转为树形结构
      this.treeData = listToTree(data.depts, '')
      // 保存一份列表数据
      this.deptList = data.depts
      // 请求后关闭 loading 状态
      this.loading = false
    },
    // 处理删除部门
    async handleDelete(id) {
      try {
        // 1.询问
        await this.$confirm('此操作不可逆，确定删除吗？', '温馨提示', {
          type: 'warning',
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        })
        // 2.确定
        // 2.1发请求(调接口通知后台)
        await delDeptAPI(id)
        // 2.2获取部门列表
        this.getDeptList()
        // 2.3给个删除成功的提示
        this.$message.success('删除成功')
      } catch (err) {
        // 3.取消
      }
    },
    // 显示添加/编辑部门的弹窗
    showAddDialog(deptObj) {
      this.isShow1 = true
      // 给deptObj对象赋值
      this.deptObj = deptObj
    },
    showEditDialog(deptObj) {
      this.isShow2 = true
      // 给deptObj对象赋值
      this.deptObj = deptObj
    },
    // 关闭弹窗
    closeDialog() {
      this.isShow1 = false
      this.isShow2 = false
    }
  }
}
</script>

<style lang="scss" scoped>
.el-tree {
  ::v-deep {
    // 小三角的样式, 去掉默认的小三角的旋转效果
    .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    // 有子节点 且未展开 +
    .el-icon-caret-right:before {
      background: url("~@/assets/common/add-circle.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 有子节点 且已展开 -
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before{
      background: url("~@/assets/common/minus-circle.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 没有子节点
    .el-tree-node__expand-icon.is-leaf::before  {
      background: url("~@/assets/common/user-filling.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
  }
}
</style>
